<template>
  <view class="strategy-detail-container">
    <!-- 状态栏 -->
    <view class="status-bar">

    </view>

    <!-- 标题栏 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <image src="/static/arrow-left.png" mode="aspectFit" class="back-icon"></image>
      </view>
      <text class="title">攻略详情</text>
      <view class="placeholder"></view>
    </view>

    <!-- 文章内容 -->
    <scroll-view scroll-y class="content-scroll">
      <view class="article-container">
        <!-- 文章标题 -->
        <view class="article-title">
          <text>{{ strategyDetail.title }}</text>
        </view>

        <!-- 图片轮播 -->
        <swiper class="article-swiper" indicator-dots circular autoplay>
          <swiper-item v-for="(url, index) in strategyDetail.imgUrls" :key="'img-'+index" @click="previewImage(strategyDetail.imgUrls, url)">
            <image :src="url" mode="aspectFill"></image>
          </swiper-item>
        </swiper>

        <!-- 文章正文 -->
        <view class="article-content">
          <text class="paragraph" space="nbsp">{{ strategyDetail.content }}</text>
          
          <!-- 补充图片 -->
          <view class="connect-images" v-if="strategyDetail.connectUrls && strategyDetail.connectUrls.length > 0">
            <image v-for="(url, index) in strategyDetail.connectUrls" 
                   :key="'connect-'+index" 
                   :src="url" 
                   mode="widthFix" 
                   @click="previewImage(strategyDetail.connectUrls, url)"
                   class="connect-image"></image>
          </view>
        </view>

        <!-- 推荐产品标题 -->
        <view class="section-title">
          <text>推荐产品</text>
        </view>

        <!-- 产品卡片 -->
        <view class="product-card" v-for="(product, index) in strategyDetail.products" :key="index">
          <image class="product-image" :src="product.image" mode="aspectFill"></image>
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <view class="product-price-row">
              <view class="price-container">
                <text class="current-price">¥{{ product.price }}</text>
                <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
              </view>
              <view class="cart-button">
                <image src="/static/cart-icon.png" mode="aspectFit"></image>
              </view>
            </view>
          </view>
        </view>

        <!-- 注意事项 -->
        <view class="tips-section" v-if="strategyDetail.tips">
          <text class="tips-title">{{ strategyDetail.tips.title }}</text>
          <text class="tips-content">{{ strategyDetail.tips.content }}</text>
        </view>

        <!-- 底部间距 -->
        <view class="bottom-space"></view>
      </view>
    </scroll-view>

  </view>
</template>

<script>
import { getIntroductionDetail } from '../../api/introduction.js'

export default {
  data() {
    return {
      id: null,
      strategyDetail: {
        title: '',
        content: '',
        productImage: '',
        products: [],
        imgUrls: [],
        connectUrls: []
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.loadStrategyDetail()
    }
        // #ifdef MP-WEIXIN
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
    // #endif
  },
  methods: {
    async loadStrategyDetail() {
      try {
        const res = await getIntroductionDetail(this.id)
        if (res.data) {
          const data = res.data
          // 确保图片链接是数组格式
          data.imgUrls = Array.isArray(data.imgUrls) ? data.imgUrls : []
          data.connectUrls = Array.isArray(data.connectUrls) ? data.connectUrls : []
          this.strategyDetail = data
        }
      } catch (error) {
        console.error('获取攻略详情失败:', error)
        uni.showToast({
          title: '获取攻略详情失败',
          icon: 'none'
        })
      }
    },
    goBack() {
      uni.navigateBack()
    },
    previewImage(urls, current) {
      uni.previewImage({
        urls: urls,
        current: current
      })
    }
  }
}


</script>

<style lang="scss">
.strategy-detail-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 88rpx;
  padding: 0 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  position: fixed;
  top: var(--window-top);
  left: 0;
  right: 0;
  z-index: 1001;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #ffffff;
  position: fixed;
  top: calc(var(--window-top) + 88rpx);
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.back-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.placeholder {
  width: 60rpx;
}

.content-scroll {
  flex: 1;
  margin-top: calc(var(--window-top) + 176rpx);
  background-color: #ffffff;
}

.article-container {
  padding: 32rpx;
}

.article-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 24rpx;
}

.article-swiper {
  width: 100%;
  height: 400rpx;
  margin-bottom: 32rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.article-swiper image {
  width: 100%;
  height: 100%;
}

.article-content {
  margin-bottom: 32rpx;
}

.paragraph {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666666;
}

.connect-images {
  margin: 30rpx 0;
  
  .connect-image {
    width: 100%;
    margin-bottom: 30rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }
}


.section-title {
  margin: 30rpx 0 20rpx;

  text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
}

.product-card {
  display: flex;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-container {
  display: flex;
  align-items: baseline;
}

.current-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4444;
}

.original-price {
  font-size: 24rpx;
  color: #999999;
  text-decoration: line-through;
  margin-left: 12rpx;
}

.cart-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4444;
  border-radius: 30rpx;
}

.cart-button image {
  width: 36rpx;
  height: 36rpx;
}

.tips-section {
  margin-top: 32rpx;
  padding: 24rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
}

.tips-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
}

.tips-content {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
}

.bottom-space {
  height: 120rpx;
}

.bottom-bar {
  height: 100rpx;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}
</style>
